function Page(el, option) {
    this.ele = document.querySelector(el);
    this.option = option;
    this.pageIndex = 1; //默认显示第一页
    this.create(); //生成结构
    this.bindData(); //绑定数据默认绑定的是第一页的效果
    // this.bindEvent(); //上下页事件的绑定;
}
Page.prototype.bindEvent = function() {
    var that = this;
    this.nextBtn.className = "page-next";
    this.nextBtn.onclick = function() {
        that.pageIndex++;
        that.bindData();
    }
    this.prevBtn.className = "page-prev";
    this.prevBtn.onclick = function() {
            that.pageIndex--;
            that.bindData();
        }
        // 正常的事件的绑定
    if (this.pageIndex == 1) {
        this.prevBtn.className = "page-prev disabled";
        this.prevBtn.onclick = null;
    }
    if (this.pageIndex == this.maxPage) {
        this.nextBtn.className = "page-next disabled";
        this.nextBtn.onclick = null;
    }
}


Page.prototype.bindData = function() {
    var that = this;
    //content中生成li
    //是否显示showpage  由总页码数(count/shownum)决定
    this.maxPage = Math.ceil(this.option["count"] / this.option["shownum"]); //101 / 5 =  21页
    var middleNum = Math.floor(this.option["showpage"] / 2); //4|3
    var start = 1;
    var end = this.maxPage > this.option["showpage"] ? this.option["showpage"] : this.maxPage;
    this.content.innerHTML = "";
    //开头
    if (this.pageIndex > middleNum) { //中间
        start = this.pageIndex - middleNum;
        end = this.pageIndex + middleNum;
    }
    if (this.pageIndex > this.maxPage - middleNum) { //10-3
        // start  = 
        end = this.maxPage;
        start = this.maxPage - this.option.showpage + 1;
    }
    //结尾
    start = start < 1 ? 1 : start;
    for (var i = start; i <= end; i++) {
        var li = document.createElement("li");
        li.innerHTML = i;
        if (this.pageIndex == i) {
            li.className = "selected";
        }
        this.content.appendChild(li);

        li.onclick = function() { //点击页码 要记录页码
            // alert(this.innerHTML);
            that.pageIndex = this.innerHTML * 1;
            that.bindData(); //

        }
    }
    that.bindEvent(); //重新的绑定事件
    if (this.option.callBack) {
        this.option.callBack(this.pageIndex);
    }
}
Page.prototype.create = function() {
    this.ele.className = "page";
    this.ele.innerHTML = "";
    this.prevBtn = document.createElement('div');
    this.prevBtn.className = "page-prev";
    this.prevBtn.innerHTML = "<<";
    this.ele.appendChild(this.prevBtn);
    this.content = document.createElement("ul");
    this.content.className = "page-content";
    this.ele.appendChild(this.content);
    this.nextBtn = document.createElement("div");
    this.nextBtn.className = "page-next";
    this.nextBtn.innerHTML = ">>";
    this.ele.appendChild(this.nextBtn);
}